<!DOCTYPE html>
<html lang="en" ng-app="demo">

    <head>
        <meta charset="utf-8">
        <title>AngularJS ui-validate</title>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.js"></script>
        <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>

        <!-- ui-validate files -->
        <script src="../dist/validate.js"></script>
    </head>

    <body class="container">
        <script>
            var app = angular.module('demo', ['ui.validate']);
            app.controller('ValidateCtrl', function($scope, $timeout, $q) {
                $scope.notBlackListed = function(value) {
                    var blacklist = ['bad@domain.com', 'verybad@domain.com'];
                    return blacklist.indexOf(value) === -1;
                };
                $scope.doesNotExist = function(value) {
                    var db = ['john.doe@mail.com', 'jane.doe@mail.com'];
                    // Simulates an asyncronous trip to the server.
                    return $q(function(resolve, reject) {
                            $timeout(function() {
                            if (db.indexOf(value) < 0) {
                                resolve();
                            } else {
                                reject();
                            }
                        }, 500);
                    });
                };
            });
        </script>
        <section id="validate" ng-controller="ValidateCtrl">
            <div class="page-header">
                <h1>Validate</h1>
            </div>
            <h3>What?</h3>
            <div class="row">
                <div class="col-md-6">
                    <p>The
                        <code>ui-validate</code> and <code>ui-validate-async</code> directives makes it very easy to create custom validator expressions.</p>
                    <div class="well">
                        <form name="form">
                            <h3>e-mail</h3>
                            <input class="form-control" name="email" placeholder="try john.doe@mail.com or bad@domain.com" type="email" required ng-model="email" ng-model-options="{ debounce: 100 }"
                            ui-validate="{blacklist: 'notBlackListed($value)'}"
                            ui-validate-async="{alreadyExists: 'doesNotExist($modelValue)'}">
                            <span ng-show='form.email.$error.blacklist'>This e-mail is black-listed!</span>
                            <span ng-show='form.email.$error.alreadyExists'>This e-mail is already taken!</span>
                            <span ng-show='form.email.$pending'>Verifying e-mail on server...</span>
                            <br>is form valid: {{form.$valid}}
                            <br>
                            <br>email errors: {{form.email.$error | json}}
                            <br>email pending: {{form.email.$pending | json}}
                            <h3>password</h3>
                            <input class="form-control" name="password" type="text" required ng-model="password" placeholder="password">
                            <input class="form-control" name="confirm_password" type="text" required ng-model="confirm_password" ui-validate=" '$value==password' "
                            ui-validate-watch=" 'password' " placeholder="confirm password">
                            <span ng-show='form.confirm_password.$error.validator'>Passwords do not match!</span>
                            <br>is form valid: {{form.$valid}}
                            <br>
                            <br>password errors: {{form.confirm_password.$error| json}}</form>
                    </div>
                    <h3>Why?</h3>
                    <p>Angular.js comes with several built-in validation mechanisms for input fields (ngRequired, ngPattern etc.) but using an arbitrary validation function requires creation of custom directives to interact with angular's validation mechanism.
                       The ui-validate directive makes it easy to use any function(s) defined in scope as a validator function(s).
                       A validator function will trigger validation on both model and input changes.</p>
                </div>
                <div class="col-md-6">
                    <pre class="prettyprint">&lt;input name="email" ng-model="email"
                        <strong>ui-validate</strong>="{blacklist : 'notBlackListed($value)' }"&gt; Is e-mail black-listed? {{!!form.email.$error.blacklist}}
                        <strong>ui-validate-async</strong>="{alreadyExists: 'doesNotExist($modelValue)' }"&gt; Is e-mail already registered? {{!!form.email.$error.alreadyExists}}
                        &lt;input name=&quot;password&quot; required ng-model=&quot;password&quot;&gt; &lt;input name=&quot;confirm_password&quot;
                        <strong>ui-validate</strong>=&quot; '$value==password' &quot;
                        <strong>ui-validate-watch</strong>=&quot; 'password' &quot;&gt; Passwords match? {{!!form.confirm_password.$error.validator}} ...
                        $scope.notBlackListed = function(value) { var blacklist = ['bad@domain.com','verybad@domain.com']; return blacklist.indexOf(value)
                        === -1; }</pre>
                    <h3>How?</h3>
                    <h4>ui-validate</h4>
                    <p>Create an expression inside a string. If it evaluates to
                        <code>true</code>the input is valid, the rule name will be
                        <code>validator</code> by default.</p>
                    <pre class="prettyprint">ui-validate=" 'validateFoo($value)' " Input is valid: {{!!myForm.myInput.$error.validator}}</pre>
                    <p><strong>Or</strong> define multiple rules by creating an object where the key is the rule name and the value is the expression string.</p>
                    <pre class="prettyprint">ui-validate="{foo:'valFoo($value)', bar:'$value == someVar'}" Foo rule passes: {{!!myForm.myInput.$error.foo}} Bar rule
                        passes: {{!!myForm.myInput.$error.bar}}</pre>
                    <p>Use ui-validate-watch or ui-validate-watch-collection to watch expressions. With ui-validate-watch-object-equality you can enable deep watching:</p>
                    <pre class="prettyprint">ui-validate-watch="'myValue'"</pre>
                    <pre class="prettyprint">ui-validate-watch-collection="'myArrayOrObject'"</pre>
                    <pre class="prettyprint">ui-validate-watch="'myDeepNestedObject'" ui-validate-watch-object-equality="true"</pre>
                    <h4>ui-validate-async</h4>
                    <p>Create an expression inside a string. Expresion must return a promise. The rule name will be
                        <code>validatorAsync</code> by default. Until promise is fulfilled, rule is placed on $pending list.
                        if promise is rejected, validation fail.
                        </p>
                    <pre class="prettyprint">ui-validate-async=" 'validateAsyncFoo($value)' " Input is valid: {{!!myForm.myInput.$error.validatorAsync}}</pre>
                    <p><strong>Or</strong> define multiple rules by creating an object where the key is the rule name and the value is the expression string.</p>
                    <pre class="prettyprint">ui-validate-async="{fooAsync:'valAsyncFoo($value)'}" fooAsync rule passes: {{!!myForm.myInput.$error.fooAsync}} </pre>
                </div>
            </div>
        </section>
    </body>

</html>
